<template>
    <fieldset class="border-2 m-4">
        <legend>配置</legend>
        <div class="grid grid-cols-3 gap-4 p-4">
            <div class="flex items-center">
                <label class="w-[100px] text-right pr-[10px] flex-shrink-0">wifi ssid:</label>
                <input type="text" class="flex-grow text-left border-2 border-black-400" v-model="ssid" />
            </div>
            <div class="flex items-center">
                <label class="w-[100px] text-right pr-[10px] flex-shrink-0">passwd:</label>
                <input type="text" class="flex-grow text-left border-2 border-black-400" v-model="passwd" />
            </div>
            <div class="flex items-center">
                <label class="w-[100px] text-right pr-[10px] flex-shrink-0">target ip:</label>
                <input type="text" class="flex-grow text-left border-2 border-black-400" />
            </div>
            <div class="flex items-center">
                <label class="w-[100px] text-right pr-[10px] flex-shrink-0">server_ip:</label>
                <input type="text" class="flex-grow text-left border-2 border-black-400" v-model="server_ip" />
            </div>
            <div class="flex items-center">
                <label class="w-[100px] text-right pr-[10px] flex-shrink-0">server_port:</label>
                <input type="text" class="flex-grow text-left border-2 border-black-400" v-model="server_port" />
            </div>
            <div class="flex items-center">
                <label class="w-[100px] text-right pr-[10px] flex-shrink-0">温度倍率:</label>
                <input type="text" class="flex-grow text-left border-2 border-black-400" v-model="temp_K" />
            </div>
            <div class="flex items-center">
                <label class="w-[100px] text-right pr-[10px] flex-shrink-0">温度偏移:</label>
                <input type="text" class="flex-grow text-left border-2 border-black-400" v-model="temp_B" />
            </div>
            <div class="flex items-center">
                <label class="w-[100px] text-right pr-[10px] flex-shrink-0">湿度倍率:</label>
                <input type="text" class="flex-grow text-left border-2 border-black-400" v-model="humi_K" />
            </div>
            <div class="flex items-center">
                <label class="w-[100px] text-right pr-[10px] flex-shrink-0">湿度偏移:</label>
                <input type="text" class="flex-grow text-left border-2 border-black-400" v-model="humi_B" />
            </div>
            <div class="flex items-center">
                <label class="w-[100px] text-right pr-[10px] flex-shrink-0">采集间隔:</label>
                <input type="text" class="flex-grow text-left border-2 border-black-400" v-model="collect_interval" />
            </div>
            <div class="flex items-center">
                <label class="w-[100px] text-right pr-[10px] flex-shrink-0">上传间隔:</label>
                <input type="text" class="flex-grow text-left border-2 border-black-400" v-model="upload_interval" />
            </div>
        </div>
        <button class="btn-primary pr-10 pl-10 mr-10 ml-10 ">get</button>
        <button class="btn-primary pr-10 pl-10 mr-10 ml-10 ">set</button>
    </fieldset>
</template>

<script setup>
import { ref, watch } from 'vue'
let ssid = ref('zzh-5g')
let passwd = ref('<PASSWORD>')
let server_ip = ref('192.168.1.100')
let server_port = ref('8080')
let temp_K = ref(1)
let temp_B = ref(0)
let humi_K = ref(1)
let humi_B = ref(0)
let collect_interval = ref(1000)
let upload_interval = ref(1000)


watch([ssid, passwd], ([newssid, newpasswd]) => {
    console.log("ssid of passwd changed:", {
        ssid: newssid, passwd: newpasswd
    })
})

</script>

<style scoped>
/* 使用UnoCSS原子类，无需自定义CSS */
</style>